<template>
	<u-popup :show="show" mode="center"  bgColor="transparent" @close="$emit('change',false)">
		<view class="flex flex-js-end mb-16">
			<w-icon name="close" size="24" @click="$emit('change',false)"></w-icon>
		</view>
		<view class="popCon">
			<view class="title">
				<!-- <image :src="$ossUrl + '/static/cj/19.png'"></image> -->
				<text class="font-color-textPrimary">{{handleLang('提示')}}</text>
				<!-- <image :src="$ossUrl + '/static/cj/20.png'"></image> -->
			</view>
			<block v-if="info.type==20">
				<view class="hint">{{handleLang('此轮抽奖需要消耗藏品明细如下，请确认～')}}</view>
				<view class="cp_info">
					<view class="item" v-for="(item,idx) in cp_list" :key="idx">
						<text>{{ item.name }}</text>
						<view class="mt-2">
							<text v-for="j in item.user_collection_ids" class="mr-4" style="color: #4E4E4E;">#{{ j }}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-if="info.type==10">
				<view class="hint">{{handleLang('此轮抽奖需要消耗')}} <text class="font-w-600 mlr-4" style="color: #222;">{{ crystal().num }}</text> {{ handleLang(crystal().name) }}，{{handleLang('请确认～')}}</view>
			</block>
			
			<view class="btn">
				<!-- <image :src="$ossUrl +'/static/cj/btn6.png'" mode="widthFix" @click="cancel"></image> -->
				<w-button pain @click="cancel" shape="square" style="width: 264rpx;border-radius: 46rpx;" >取消</w-button>
				<!-- <image :src="$ossUrl +'/static/cj/btn7.png'"  mode="widthFix" @click="confim"></image> -->
				<w-button @click="confim" shape="square" style="width: 264rpx;border-radius: 46rpx;">确认</w-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default: false
			},
			info:{
				type:Object,
				default:{}
			},
			num:{
				type:Number | String,
				default: 1
			}
		},
		computed:{
			cp_list(){
				let arry = this.num==1?this.info.consecutive_draws_1:this.info.consecutive_draws_5;
				return arry
			}
		},
		model:{
			prop:'show',
			event:'change'
		},
		data() {
			return {
				
			};
		},
		methods:{
			cancel() {
				// 藏品抽奖 取消
				if (this.info.type==20) {
					this.$emit('refresh')
				}
				this.$emit('change',false)
			},
			confim() {
				this.$emit('change',false)
				this.$emit('confim')
			},
			// 水晶类型
			crystal() {
				let { crystal,integral_1,integral_5 } = this.info;
				let total = this.num==1?integral_1:integral_5;
				switch(true) {
					case crystal=='10':
						return { icon:'hsj',name:'黄水晶',num:total }
						break;
					case crystal=='20':
						return { icon:'zsj',name:'紫水晶',num:total }
						break;
					case crystal=='30':
						return { icon:'lsj',name:'蓝水晶',num:total }
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popCon{
		width: 600rpx;
		// background-color: #ffffff;
		background-image: url($IMG_URL + '/static/cj/popup-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		border-radius: 32rpx;
		padding: 40rpx;
		position: relative;
		z-index: 999;
		
		>.title{
			width: 100%;
			@extend .flex-center;
			>text{
				font-size: 32rpx;
				color: #222;
				font-weight: bold;
				margin: 0 32rpx;
			}
			>image{ width: 46rpx;height: 12rpx; }
		}
		>.hint{
			color: #B3B3B3;
			@extend .font-size-14,.mt-24;
		}
		>.cp_info{
			width: 100%;
			max-height: 500rpx;
			overflow-y: scroll;
			padding: 0 60rpx;
			>.item{
				width: 100%;
				margin-top: 32rpx;
				>text,>view{
					display: block;
					font-size: 32rpx;
					color: #000;
					font-weight: 500;
				}
			}
		}
		>.btn{
			width: 100%;
			margin-top: 80rpx;
			gap:24rpx;
			@extend .flex-center-sb;
			
			>image{
				width: 248rpx;
				height: 116rpx;
				display: block;
			}
		}
	}
</style>
